<template>
  <dialog_item :dialogTitle="$t('exception_day_info')"  :visible.sync="standardDayDetailVisible" :appendBody="true" dialogClass="specialDetail" :isNotShowDefaultBtn="true">
    <el-main>
      <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo" :gutter="24" >
        <el-col :span="12">{{$t('set_working_hour_special')}}</el-col>
        <el-col :span="12" style="text-align:right">
          <span class="toolbar-buttons">
            <el-button type="primary" @click="onSaveBtn" size="small">{{$t('save')}}</el-button>
            <el-button type="primary"  @click="$emit('exit')"  size="small" plain>{{$t('exit')}}</el-button>
          </span>
        </el-col>
      </el-row>
      <!-- <el-row style="text-align:center">
        {{$t('set_working_hour_special')}}:
      </el-row> -->
    </el-main>
    <el-form  label-position="left"  label-width="100px" class="contentPadding0">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('run')" >
            <el-radio v-model="detail.workingDay" :label="false">{{$t('non_weekdays')}}</el-radio>
            <el-radio v-model="detail.workingDay" :label="true">{{$t('weekdays')}}</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form  label-position="left"  label-width="100px" v-if="detail.workingDay" size="small" class="contentPadding0">
      
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'1'">
            <el-time-picker
              v-model="detail.startTime1"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
            
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'1'">
            <el-time-picker
              v-model="detail.endTime1"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'2'">
            <el-time-picker
              v-model="detail.startTime2"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'2'">
            <el-time-picker
              v-model="detail.endTime2"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'3'">
            <el-time-picker
              v-model="detail.startTime3"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'3'">
            <el-time-picker
              v-model="detail.endTime3"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'4'">
            <el-time-picker
              v-model="detail.startTime4"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'4'">
            <el-time-picker
              v-model="detail.endTime4"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'5'">
            <el-time-picker
              v-model="detail.startTime5"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'5'">
            <el-time-picker
              v-model="detail.endTime5"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form  label-position="left"  label-width="100px">
      <el-row>
        <el-col>{{$t('time_frame')}}：</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')" required>
            
            <el-date-picker
              v-model="detail.startDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :placeholder="$t('datetime')"
              :picker-options="pickerOptions0">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')" required>
            <el-date-picker
              v-model="detail.endDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :placeholder="$t('datetime')"
              :picker-options="pickerOptions1">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('description')">
            <el-input
              type="textarea"
              :rows="2"
              v-model="detail.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    </dialog_item>
</template>

<script>


export default {
  data(){
    return {
      detail:{},
      pickerOptions0: {
        // disabledDate: (time) => {
        //   if (this.detail.endDate != "") {
        //     return time.getTime() >  new Date(this.detail.startDate).getTime();
        //   }
        // },
      },
      pickerOptions1: {
        // disabledDate: (time) => {
        //   if (this.detail.startDate != "") {
        //     return time.getTime() < new Date(this.detail.startDate).getTime();//减去一天的时间代表可以选择同一天;

        //   }
        // }
      },
    }
  },
  props:["visible","content","mode"],
  computed:{
    standardDayDetailVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  created() {
    this.detail=JSON.parse(JSON.stringify(this.content))
    this.$forceUpdate()
  },
  methods: {
    onSaveBtn(){
      let detail={
        "strstatus": "01",
        "startTime1": "",
        "endTime1": "",
        "startTime2": "",
        "endTime2": "",
        "startTime3": "",
        "endTime3": "",
        "startTime4": "",
        "endTime4": "",
        "startTime5":"" ,
        "endTime5": "",
        "remark": "",
        "startDate": "",
        "endDate": "",
        "workingDay":true,
        "calendar":this.detail.calendar,
      }
      if(this.detail.startDate!="" &&this.detail.endDate!="" && this.detail.startDate && this.detail.endDate){
        // 判断开始时间结束时间
        if(new Date(this.detail.startDate).getTime() >= new Date(this.detail.endDate).getTime()) return this.$message.error('开始时间不能大于结束时间')
        if(this.mode=='detail'){
          detail.id="";
          detail={
            "id":this.detail.id,
            "strstatus": this.detail.workingDay?"01":"02",
            "startTime1": this.detail.startTime1,
            "endTime1": this.detail.endTime1,
            "startTime2": this.detail.startTime2,
            "endTime2": this.detail.endTime2,
            "startTime3": this.detail.startTime3,
            "endTime3": this.detail.endTime3,
            "startTime4": this.detail.startTime4,
            "endTime4": this.detail.endTime4,
            "startTime5":this.detail.startTime5 ,
            "endTime5": this.detail.endTime5,
            "remark": this.detail.remark,
            "startDate": this.detail.startDate,
            "endDate": this.detail.endDate,
            "workingDay":this.detail.workingDay,
            "calendar":this.detail.calendar,
          }
          this.$api.saveSpecialDay(
            {domainid:this.$route.query.domainid,id:this.detail.calendar.id,data:detail},
            {
              onSucess: resp => {
                if(resp.data.errcode==0){
                  this.$message({
                    showClose: true,
                    message: resp.data.data,
                    type: "success"
                  });
                  this.$emit('exit')
                }else{
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "error"
                  });
                }
              },
              onError:()=>{
                this.$message({
                  showClose: true,
                  message:this.$t('save_failed'),
                  type: "error"
                });
              }
            }
          );
        }else{
          detail={
            "strstatus": this.detail.workingDay?"01":"02",
            "startTime1": this.detail.startTime1,
            "endTime1": this.detail.endTime1,
            "startTime2": this.detail.startTime2,
            "endTime2": this.detail.endTime2,
            "startTime3": this.detail.startTime3,
            "endTime3": this.detail.endTime3,
            "startTime4": this.detail.startTime4,
            "endTime4": this.detail.endTime4,
            "startTime5":this.detail.startTime5 ,
            "endTime5": this.detail.endTime5,
            "remark": this.detail.remark,
            "startDate": this.detail.startDate,
            "endDate": this.detail.endDate,
            "workingDay":this.detail.workingDay,
            "calendar":this.detail.calendar,
          }
          this.$api.addSpecialDay(
            {domainid:this.$route.query.domainid,id:this.detail.calendar.id,data:detail},
            {
              onSucess: resp => {
                if(resp.data.errcode==0){
                  this.$message({
                    showClose: true,
                    message: resp.data.data,
                    type: "success"
                  });
                  this.$emit('exit')
                }else{
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "error"
                  });
                }
              },
              onError:()=>{
                this.$message({
                  showClose: true,
                  message: this.$t('save_failed'),
                  type: "error"
                });
              }
            }
          );
        }
      }else{
        this.$message({
          showClose: true,
          message:this.$t('start_end_date_not_empty'),
          type: "error"
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>

</style>